<template>
	<view class="bonds">
		<view class="bonds-bcg" v-show="checktext == '活期'">
			<view class="bcg-tols">
				<text>总金额(元)</text>
				<text class="iconfont iconyanjing"></text>
			</view>
			<view class="bcg-two">
				<text>{{ earningsProducts.earningsMoney }}</text>

				<view>
					<text class="iconfont iconanquandunpai"></text>
					<text>安全保障中</text>
				</view>
			</view>
			<view class="bcg-three">
				<view>
					<view>
						<text>昨日收益</text>
					</view>
					<view>
						<text>{{
              earningsProducts.currentProductYieldDailyEarningsAll
            }}</text>
					</view>
				</view>
				<view>
					<view>
						<text>持有收益</text>
					</view>
					<view>
						<text>{{ earningsProducts.holdingGains }}</text>
					</view>
				</view>
				<view>
					<view>
						<text>累计收益</text>
					</view>
					<view>
						<text>{{ earningsProducts.accumulatedEarnings }}</text>
					</view>
				</view>
			</view>
			<view class="bcg-four">
				<view>
					<text>交易明细</text>
				</view>
				<view>
					<text>收益记录</text>
				</view>
				<view>
					<text>我的定投</text>
				</view>
			</view>
		</view>
		<view class="holdlist">
			<text>持有列表</text>
			<text v-show="checktext == '黄金'" class="gold">黄金施行T+1交易模式 请第二天查看</text>

			<view class="sel">
				<!-- <picker @change="bindPickerChange" :value="index" :range="array">
				   <view class="uni-input">{{array[index]}}</view>
			</picker> -->
				<SelectList @checks="checks"></SelectList>
				<!-- <text class="iconfont iconxiala"></text> -->
			</view>
		</view>
		<view v-for="(item, index) in holdsProduct" :key="index" @click="shuhui(item)">
			<view class="goodList" v-show="checktext == '活期'">
				<view class="title">
					<text>{{ item.currentProductName }}</text>
				</view>
				<view class="list-two">
					<view>
						<view>
							<text>金额</text>
						</view>
						<view class="jine">
							<text>{{ item.currentProductPrincipal }}</text>
						</view>
					</view>
					<view>
						<view class="chiyou">
							<text>持有收益</text>
						</view>
						<view>
							<text :class="num < 0 ? 'col' : 'col2'">{{
                item.currentProductRevenue ? item.currentProductRevenue : 0
              }}</text>
						</view>
					</view>
					<view>
						<view class="yest">
							<text>昨日收益</text>
						</view>
						<view>
							<text :class="num < 0 ? 'col' : 'col2'">{{
                item.currentProductYieldDailyEarnings
                  ? item.currentProductYieldDailyEarnings
                  : 0
              }}</text>
						</view>
					</view>
				</view>
				<view class="list-three">
					<text>交易：1笔买入中合计1000.00元</text>
				</view>
			</view>
			<view class="goodList" v-show="checktext == '黄金'">
				<view class="title">
					<text>{{ item.fundName }}</text>
				</view>
				<view class="list-two">
					<view>
						<view>
							<text>金额</text>
						</view>
						<view class="jine">
							<text>{{ item.money }}</text>
						</view>
					</view>
					<view>
						<view class="chiyou">
							<text>持有收益</text>
						</view>
						<view>
							<text :class="num < 0 ? 'col' : 'col2'">{{
                item.holdEarn ? item.holdEarn : 0
              }}</text>
						</view>
					</view>
					<view>
						<view class="yest">
							<text>昨日收益</text>
						</view>
						<view>
							<text :class="num < 0 ? 'col' : 'col2'">{{
                item.yesterdayEarn
                  ? item.yesterdayEarn
                  : 0
              }}</text>
						</view>
					</view>
				</view>
				<view class="list-three">
					<text>交易：1笔买入中合计1000.00元</text>
				</view>
			</view>
			<view class="goodList" v-show="checktext == '定期'">
				<view class="title">
					<text>{{ item.regularProductName }}</text>
				</view>
				<view class="list-two">
					<view>
						<view>
							<text>预计收益</text>
						</view>
						<view class="jine">
							<text>{{ item.regularProductEarningsMoneyAll }}</text>
						</view>
					</view>
					<view>
						<view class="chiyou">
							<text>本金</text>
						</view>
						<view>
							<text :class="num < 0 ? 'col' : 'col2'">{{
                item.regularSupplierPropertyBuy
              }}</text>
						</view>
					</view>
				</view>
				<view class="list-three">
					<text>交易：1笔买入中合计1000.00元</text>
				</view>
			</view>
		</view>
		<view>
			<u-popup v-model="show" mode="center">
				<input type="text" v-model="currentId" />
				<input type="text" v-model="currentName" />
				<input type="text" v-model="currentTurnover" />
				<input type="text" v-model="code" />
				<button type="default" @click="getyanzhen">获取验证码</button>
				<button type="default" @click="queing">确定赎回</button>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import SelectList from "../../components/select.vue";
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers("licai");
	export default {
		created() {
			this.getUserGoldProductList();
			this.getearningsProducts();
			this.getholdsProducts();


			const data = uni.getStorageSync("check");

		},
		computed: {
			...mapState(["earningsProducts", "holdsProduct"]),
		},
		data() {
			return {
				num: 1,
				checktext: "活期",
				show: false,
				userTel:uni.getStorageSync('userTel'),
				input: '123',
				code: '',
				currentId: "",
				currentName: "",
				currentTurnover: ""
			};
		},
		methods: {
			...mapActions([
				"getearningsProducts",
				"getholdsProducts",
				"getregularHoldsProducts",
				"getUserGoldProductList",
				'sellCurrents',
				'sendCodes'
			]),
			shuhui(a) {
				this.show = true
				this.currentId = a.currentSupplierPropertyId
				this.currentName  =a.currentProductName
				this.currentTurnover=a.currentProductPrincipal
				
				console.log(a)
			},
			queing() {
			this.sellCurrents(
				{
					code:this.code,
					currentId: this.currentId,
					currentName: this.currentName,
					currentTurnover: this.currentTurnover
				}
			)
			},
			//获取验证码
			getyanzhen(){
				this.sendCodes(
				{userTel:this.userTel}
				)
			},
			checks(a) {
				this.checktext = a;
				if (a == "定期") {
					this.getregularHoldsProducts();
				} else if (a == "活期") {
					this.getholdsProducts();
				} else if (a == "黄金") {
					this.getUserGoldProductList();
				}
			},
			// bindPickerChange:function(e) {
			//             // console.log('picker发送选择改变，携带值为', e.target.value)
			//             this.index = e.target.value
			//         }
		},
		components: {
			SelectList,
		},
		onLoad() {
			console.log("111", this.earningsProducts);
		},
	};
</script>

<style lang="scss" scoped>
	.col {
		color: #ff5a44;
	}

	.col2 {
		color: #1ab299;
	}

	.bonds {
		background-color: #fafafa;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		height: 100vh;

		.bonds-bcg {
			box-sizing: border-box;
			padding-top: 16rpx;
			padding-left: 40rpx;
			width: 100%;
			height: 406rpx;
			background: url(../../static/iamges/aaaaaa.png) no-repeat center;
			border-radius: 20rpx;
			background-size: contain;

			.bcg-tols {
				width: 100%;
				height: 10%;
				// margin-top:32rpx ;
				color: #ffe6e6;
				font-size: 24rpx;

				text:last-child {
					margin-left: 24rpx;
				}
			}

			.bcg-two {
				height: 30%;
				margin-top: 16rpx;
				// display:flex;
				// justify-content: space-around;
				color: white;

				>text {
					// width:60%;
					font-size: 72rpx;
				}

				view {
					float: right;
					text-align: center;
					line-height: 90rpx;
					font-size: 24rpx;
					// width:20%;
					margin-right: 40rpx;

					text:last-child {
						margin-left: 10rpx;
					}
				}
			}

			.bcg-three {
				height: 25%;
				width: 90%;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin-bottom: 20rpx;
				color: white;

				view:first-child {
					justify-content: flex-start;
				}

				>view view:first-child {
					color: #ffe6e6;
					font-size: 24rpx;
					text-align: left;
				}

				>view view:last-child {
					margin-top: 10rpx;
				}
			}

			.bcg-four {
				width: 90%;
				height: 20%;
				// margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;
				color: #ffe6e6;
				font-size: 24rpx;
				border-top: 1px solid rgba($color: #ffe6e6, $alpha: 0.2);

				view {
					width: 30%;
					line-height: 80rpx;
				}

				view:nth-child(2) {
					border-left: 1px solid rgba($color: #ffe6e6, $alpha: 0.2);
					border-right: 1px solid rgba($color: #ffe6e6, $alpha: 0.2);
				}
			}
		}

		.holdlist {
			height: 50rpx;
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;

			text {
				font-weight: bolder;
				font-size: 32rpx;
				line-height: 50rpx;
			}

			.gold {
				font-size: 24rpx;
			}

			.sel {
				color: #595959;
				font-weight: bold;
				width: 100rpx;
				// border:1px solid #b6b6b6;
				font-size: 28rpx;
				border-radius: 10rpx;
				line-height: 50rpx;
				display: flex;
				justify-content: space-around;
			}
		}

		.goodList {
			width: 100%;
			height: 260rpx;
			background-color: white;
			border-radius: 20rpx;
			padding-top: 28rpx;
			margin-bottom: 40rpx;

			.title {
				height: 30%;
				font-weight: bolder;
				font-size: 32rpx;
				margin-left: 28rpx;
			}

			.list-two {
				height: 30%;
				display: flex;
				// margin-top:28rpx;
				justify-content: space-around;

				>view view:first-child {
					color: #cdcdcd;
					font-size: 24rpx;
					text-align: center;
				}

				>view view:last-child {
					margin-top: 5rpx;
					font-weight: bolder;
					font-size: 36rpx;
				}
			}

			.list-three {
				height: 30%;
				font-size: 24rpx;
				margin-top: 40rpx;
				margin-left: 28rpx;
				color: #cdcdcd;
			}
		}

		.goodList-t {
			width: 100%;
			height: 260rpx;
			background-color: white;
			border-radius: 20rpx;
			padding-top: 28rpx;

			.title {
				height: 30%;
				font-weight: bolder;
				font-size: 32rpx;
				margin-left: 28rpx;
			}

			.list-two {
				height: 30%;
				display: flex;
				// margin-top:28rpx;
				justify-content: space-around;

				>view view:first-child {
					color: #cdcdcd;
					font-size: 24rpx;
					text-align: center;
				}

				>view view:last-child {
					margin-top: 5rpx;
					font-weight: bolder;
					font-size: 36rpx;
				}
			}

			.list-three {
				height: 30%;
				font-size: 24rpx;
				margin-top: 40rpx;
				margin-left: 28rpx;
				color: #cdcdcd;
			}
		}
	}
</style>
